/*
    目标：
        实现一些简单的组件封装

        步骤：
            1. 分析结构 - 确定是否就是需要复用
            2. 先搭建出大概的结构， 会变化的部分，通过 父传子 传入
*/
import React, { Component } from 'react'
import '../assets/css/k-input.less'

export default class KInput extends Component {
    changeHandle(e) {
        // 调用一个从父组件传递进来的方法
        this.props.onChange && this.props.onChange(e.target.value)
    }
    render() {
        return (
            <div className={['k-input'].concat(this.props.className).join(' ')}>
                {/* 左边的图标 */}
                <i className={`iconfont ${this.props.icon}`}></i>
                {/* 右边的输入框 */}
                <input type={this.props.type} placeholder={this.props.placeholder} value={this.props.value} onChange={this.changeHandle.bind(this)} />
            </div>
        )
    }
}
